<template>
  <transition name="el-fade-in-linear">
    <div class="main-bg">
      <div class="first">
        <el-row >
          <el-button class="el-icon-plus" type="primary" @click="addClick()" size="mini">
            新增配置
          </el-button>
          <el-button :disabled="radio==''" class="el-icon-edit" type="primary" @click="editClick()" size="mini">
            修改配置
          </el-button>
        </el-row>
        <div style="height:5px;">&nbsp;</div>
        <!-- 用户搜索选项组组件 -->
        <vsearchtag  @toSearchFilter="toSearchFilter" :chooseParams="pageinfo.params.findParams" />
        <div style="height:5px;">&nbsp;</div>
      </div>
      <el-table
        border
        :row-class-name="tableRowClassName"
        style="width:100%"
        size="mini"
        :max-height="slide_h"
        @header-contextmenu="showMenu"
        :empty-text="(data.data!=null&&data.data.length==0)?'空空如也':'数据初始化中...'"
        :data="data.data"
        ref="table"
        highlight-current-row
        @current-change="cellClick"
      >
        <el-table-column label="#" width="50" center>
          <template slot-scope="scope">
            <el-radio :label="scope.row.id" v-model="radio">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="id" width="60" label="ID"/>
        <el-table-column width="360">
          <template slot="header" slot-scope="header">
            <vproper :bottom="'bottom'" :width="240" :findParams="pageinfo.params.findParams.descript"  @toSearchFilter="toSearchFilter"/>
          </template>
          <template slot-scope="scope">
            <div >{{scope.row.descript}}</div>
          </template>
        </el-table-column>
        <el-table-column  >
          <template slot="header" slot-scope="header">
            <vproper :bottom="'bottom-start'" :width="180" :findParams="pageinfo.params.findParams.keyName"  @toSearchFilter="toSearchFilter"/>
          </template>
          <template slot-scope="scope">
            {{scope.row.keyName}}
          </template>
        </el-table-column>
        <el-table-column >
          <template slot="header" slot-scope="header">
            <vproper :bottom="'bottom'" :width="180" :findParams="pageinfo.params.findParams.keyValue"  @toSearchFilter="toSearchFilter"/>
          </template>
          <template slot-scope="scope">
            <div class="lue">{{scope.row.keyValue}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="operator" width="90"   label="修改人"/>
        <el-table-column width="115" prop="operatorIp" label="修改ip"/>
        <el-table-column width="140" prop="updateTime" label="更新时间"/>
        <el-table-column width="140" prop="createTime" label="创建时间"/>
      </el-table>
      <div class="first">
        <v-page v-if="pageinfo.pages!=null" :pageinfo='pageinfo' @changepageinfo="changepaginfo"/>
      </div>
      <v-dialog v-if="dialoginfo.show == 1"
                :dialoginfo="dialoginfo"
                @changedialogshow="changedialogshow"/>
    </div>
  </transition>
</template>
<script>
  const pagination = () =>
    import ("@/components/pagination/pagetemplate")
  const dialog = () =>
    import ("@/components/modules/sysManagement/system/view_dialog_editSysConfig")
  import tsearchtag from "@/components/search/template_tag_search"
  import tproper from "@/components/search/template_proper_search"
  export default {
    inject:["reload"],
    components: {
      "v-dialog": dialog,
      "v-page": pagination,
      "vproper": tproper,
      "vsearchtag":tsearchtag
    },
    data() {
      return {
        dialoginfo: {
          show:0,
          title:'',
          url:'',
          data:''
        },
        isajax: false,
        data: "",
        slide_h:document.body.offsetHeight - (204),
        loadingTxt: "",
        radio: "",
        currentData: "",
        pageinfo: this.$store.getters.getPageInfo(this.$route.path,this.proAPI.tableConfig.sysConfigs),
        search: ""
      }
    },
    methods: {
      init() {
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.findAllSysConfig,lock:1,text:this.loadingTxt});
        this.proAPI.getJson(this.proAPI.URLS.findAllSysConfig,this.proUtil.generateParams(this.pageinfo.params)).then((res) => {
          this.data = res;
          this.pageinfo.pages = res.pages;
          this.pageinfo.total = res.total;
        })
      },
      editClick() {
        this.dialoginfo.url = this.proAPI.URLS.modifyConfigById;
        this.dialoginfo.data = {
          "id": this.currentData.id,
          "keyName": this.currentData.keyName,
          "keyValue": this.currentData.keyValue,
          "descript": this.currentData.descript
        };
        this.dialoginfo.show = 1;
        this.dialoginfo.title='修改系统配置';
      },
      addClick() {
        this.dialoginfo.url = this.proAPI.URLS.addConfig;
        this.dialoginfo.data = {
          "keyName": '',
          "keyValue": '',
          "descript": ''
        };
        this.dialoginfo.show = 1;
        this.dialoginfo.title='新增系统配置';
      },
      cellClick(currentRow,oldCurrentRow) {
        if(currentRow!=undefined){
          this.currentData = currentRow;
          this.radio = currentRow.id
        }
      },
      changepaginfo() {
        this.$store.commit("savePageInfo",this.pageinfo);
        // console.log(this.pageinfo);
        this.init();
      },
      changedialogshow() {
        this.dialoginfo.show = 0;
        // console.log(this.dialogshow);
      },
      toSearchFilter(){
        this.currentData = "";//需要初始化一下选中状态
        this.radio = "";
        this.pageinfo.params.page=1;
        this.init();
      }
    },
    mounted() {
      this.init();
    },
    updated() {
      // console.log(333);
    },
    afterCreated() {

    }
  }
</script>
<style scoped>
  .el-table .success-row {
    background: #f0f9eb;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .success {
    text-color: #67C23A
  }

  .danger {
    text-color: #F56C6C
  }
  .mgbottom {
    margin-bottom: 5px;
  }

  .imgMiddle {
    height: 37px;
    vertical-align: middle
  }
</style>
